<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <div class="right-panel-search">
                    <div class="search-input">送货单号</div>
                    <el-input v-model="search.delivery_no_sn" placeholder="请输入送货单号" clearable @change="handleKeyDown"/>
                    <div class="search-input">供应商</div>
                    <el-select v-model="search.supplier_id"  filterable placeholder="请选择物料名称" clearable>
                        <el-option v-for="item in apply" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"/>
                    </el-select>
                    <div class="search-input">色号</div>
                    <el-input v-model="search.color_number" placeholder="请输入色号" clearable @change="handleKeyDown"/>
                    <div class="search-input">状态</div>
                    <el-select v-model="search.is_bill" placeholder="状态" clearable>
                        <el-option label="未生成" :value="0"/>
                        <el-option label="已生成" :value="1"/>
                </el-select>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                    <el-button type="primary" @click="generate" :disabled="selection.length==0" v-auth="'proEnter.create'">生成结算单</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed label="送货单号" prop="delivery_no_sn" align="center" width="125"></el-table-column>
                <el-table-column fixed label="供应商信息" prop="referred_as" align="center"></el-table-column>
                <el-table-column fixed label="物料基础信息" prop="sample_clothing" align="center" width="310">
                    <template #default="scope">
                        <div class="shopInfo">
                            <el-image class="img" v-if="scope.row.materialSpec" :src="scope.row.materialSpec.image" :preview-src-list="scope.row.materialSpec.image_arr" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            <div class="right">
                                <div style="width:150px" v-if="scope.row.materialSpec">物料SKC：{{scope.row.materialSpec.skc}}</div>
                                <div v-if="scope.row.materialSpec">物料名称：{{scope.row.material_name}}</div>
                                <div v-if="scope.row.materialSpec">色号:{{scope.row.materialSpec.color_number}}</div>
                                <div v-if="scope.row.materialSpec">颜色:{{scope.row.materialSpec.colour}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="单位成分" prop="category_name" align="center">
                    <template #default="scope">
                        <div>单位:{{scope.row.unit_name }}</div>
                        <div v-if="scope.row.materialSpec">成分:{{scope.row.materialSpec.material.component_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="采购信息" prop="num" align="center">
                    <template #default="scope">
                        <div>类型:{{scope.row.source_name}}</div>
                        <div>采购量:{{scope.row.num}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="入库量" prop="income_num" align="center"></el-table-column>
                <el-table-column label="价格" prop="price" align="center"></el-table-column>
                <el-table-column label="合计金额" prop="amount" align="center"></el-table-column>
                <el-table-column label="缸号" prop="batch_no" align="center"></el-table-column>
                <el-table-column label="物料需求来源" prop="material_name" align="center">
                    <el-table-column label="工厂货号" prop="factory_number" align="center"></el-table-column>
                    <el-table-column label="批次号" prop="batch_number" align="center"></el-table-column>
                    <el-table-column label="单据来源" prop="order_no" align="center">
                        <template #default="scope">
                                {{scope.row.order_no}}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
            </scTable>
        </el-main>
    </el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></save-dialog>
</template>

<script>
import saveDialog from './save'

export default {
	name: 'user',
	components: {
		saveDialog
	},
	data() {
		return {
			dialog: {
				save: false,
				exa: false,
                ware:false,
			},
			group: [],
			apiObj: this.$API.material.getMaterialPurchaseOrder.lists,
            query:{
                work_status:3,
                is_bill:0,
            },
			selection: [],
			search: {
				supplier_id: null,
				delivery_no_sn: null,
				category_id: null,
				color_number: null,
				component: null,
                is_bill:0
			},
            apply:[],
		}
	},
	mounted() {
        this.getApply()
	},
	methods: {
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        async getApply(){
            var res = await this.$API.all.Apply.get({type:-1});
            this.apply = res.data;
        },
        handleKeyDown() {
            this.upsearch()
        },
        selectionChange(selection){
            this.selection = selection;
        },
        // 生成结算单
        async generate() {
			var delete_ids = [];
			this.selection.forEach((item) => {
				delete_ids.push(item.id);
			});
			this.$confirm(
				`确定生成选中的 ${this.selection.length} 项吗？`,
				"提示",
				{
					type: "warning",
				}
			)
				.then(() => {
					this.allCreate(delete_ids);
				})
				.catch(() => { });
		},
         async allCreate(delete_ids) {
			var reqData = { ids: delete_ids };
			var res = await this.$API.material.getMaterialPurchaseOrder.createBill.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh();
				this.$message.success("操作成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
</style>
